import React, { useState } from 'react';
import cs from 'classnames';

import styles from './style/index.module.less';
import {
  DatePicker,
  Form,
  Grid,
  Input,
  Radio,
  Select,
  Space,
} from '@arco-design/web-react';
import { EnumsRes } from '@/api/interface';
import dayjs from 'dayjs';
import { ReqViolationCreate } from '@/api/interface/violation';

const { Row, Col } = Grid;
const TextArea = Input.TextArea;
const RadioGroup = Radio.Group;
const Option = Select.Option;

export const MONTHS = [
  '01',
  '02',
  '03',
  '04',
  '05',
  '06',
  '07',
  '08',
  '09',
  '10',
  '11',
  '12',
];
export function volation(
  formData: ReqViolationCreate,
  form: any,
  rtl,
  t,
  lang: string,
  emirateEnums: Array<EnumsRes>,
  violationTypeEnums: Array<EnumsRes>,
  entitys,
  getEntitys: (e: any) => void,
  months: string[],
  setMonths: (months: string[]) => void
) {
  const startYear = 1995;
  const years = [];

  //获取当前年月
  const endYear = dayjs().year();
  const month = dayjs().month() + 1;

  for (let year = startYear; year <= endYear; year++) {
    years.push(year);
  }
  years.reverse();

  return (
    <div className={cs(styles['block'], rtl ? 'rtl' : '')}>
      <div className={styles['block-title']}>{t['volation.volation']}</div>
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            label={t['volation.emirate']}
            field="emirate"
            rules={[{ required: true }]}
          >
            <Select
              allowClear
              placeholder={t['volation.emirate.placeholder']}
              onChange={getEntitys}
            >
              {emirateEnums.map((option, index) => (
                <Option key={index} value={option?.key}>
                  {option.value[lang === 'en-US' ? 'en' : 'ar']}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t['volation.type']}
            field="violationType"
            rules={[{ required: true }]}
          >
            <Select
              allowClear
              placeholder={t['volation.type.placeholder']}
              triggerProps={{
                autoAlignPopupWidth: false,
                autoAlignPopupMinWidth: true,
              }}
            >
              {violationTypeEnums.map((option, index) => (
                <Option key={index} value={option?.key}>
                  {option.value[lang === 'en-US' ? 'en' : 'ar']}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t['volation.data']}
            field="violationDate"
            rules={[{ required: true }]}
          >
            <DatePicker
              onVisibleChange={(visible) => {
                if (!visible) {
                  form.validate(['violationDate'], (e) => {
                    console.log(e);
                  });
                }
              }}
              placeholder={t['volation.data.placeholder']}
              style={{ width: '100%' }}
              format="YYYY-MM-DD"
              disabledDate={(date) => dayjs(date).isAfter(dayjs())}
            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label={t['volation.entityName']}
            field="emirateEntity"
            rules={[{ required: true }]}
          >
            <Select
              allowClear
              showSearch
              placeholder={t['volation.entityName.placeholder']}
              filterOption={(inputValue, option) =>
                option.props.children
                  .toLowerCase()
                  .indexOf(inputValue.toLowerCase()) >= 0
              }
            >
              {entitys.map((option, index) => (
                <Option key={index} value={option?.id}>
                  {option[lang === 'en-US' ? 'name' : 'nameAr']}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          {formData.emirateEntity === -1 ? (
            <Form.Item
              label={t['volation.otherEntityName']}
              field="emirateEntityOther"
              rules={[{ required: true }]}
            >
              <Input
                allowClear
                maxLength={100}
                placeholder={t['volation.otherEntityName.placeholder']}
              />
            </Form.Item>
          ) : (
            ''
          )}
        </Col>
        <Col span={12}>
          <Form.Item
            label={t['volation.desc']}
            field="violationDesc"
            rules={[{ required: true }]}
          >
            <TextArea
              autoSize={{ minRows: 5, maxRows: 5 }}
              maxLength={5000}
              showWordLimit
              placeholder={t['volation.desc.placeholder']}
            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label={t['volation.addtionalDetails']}
            field="violationAdditionalDetails"
          >
            <TextArea
              autoSize={{ minRows: 5, maxRows: 5 }}
              maxLength={5000}
              showWordLimit
              placeholder={t['volation.addtionalDetails.placeholder']}
            />
          </Form.Item>
        </Col>
        <Col span={24}>
          <Space>
            <div className={styles['form']}>{t['volation.question']}:</div>
            <Form.Item field="hasReported">
              <RadioGroup style={{ marginLeft: 20, marginRight: 20 }}>
                <Radio value={true}>{t['YES']}</Radio>
                <Radio value={false}>{t['NO']}</Radio>
              </RadioGroup>
            </Form.Item>
          </Space>
        </Col>
        {formData.hasReported && (
          <>
            <Col span={8}>
              <Form.Item
                label={t['volation.entityName']}
                field="refEntity"
                rules={[{ required: true }]}
              >
                <Input
                  allowClear
                  maxLength={100}
                  placeholder={t['volation.entityName.placeholder2']}
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label={t['volation.number']} field="refRefNumber">
                <Input
                  allowClear
                  maxLength={100}
                  placeholder={t['volation.number.placeholder']}
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label={t['volation.dateOfComplaint']}>
                {/* <Row gutter={24}> */}
                {/* <Col span={12}> */}
                <Form.Item field="refYear">
                  <DatePicker
                    placeholder={t['volation.data1.placeholder']}
                    style={{ width: '100%' }}
                    format="YYYY-MM-DD"
                    disabledDate={(date) => dayjs(date).isAfter(dayjs())}
                  />
                  {/* <Select
                        placeholder={t['volation.refYear.placeholder']}
                        onChange={(e) => {
                          if (e === endYear) {
                            form.setFieldsValue({ refMonth: undefined });
                            const months = MONTHS.slice(0, month);
                            setMonths(months);
                          } else {
                            setMonths(MONTHS);
                          }
                        }}
                      >
                        {years.map((option) => (
                          <Option key={option} value={option}>
                            {option}
                          </Option>
                        ))}
                      </Select> */}
                </Form.Item>
                {/* </Col> */}
                {/* <Col span={12}>
                    <Form.Item field="refMonth">
                      <Select placeholder={t['volation.refMonth.placeholder']}>
                        {months.map((option) => (
                          <Option key={option} value={option}>
                            {option}
                          </Option>
                        ))}
                      </Select>
                    </Form.Item>
                  </Col> */}
                {/* </Row> */}
              </Form.Item>
            </Col>
          </>
        )}
      </Row>
    </div>
  );
}
